<template>
  <div class="queryTable">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <slot name="tableTop"></slot>
        <el-button
          v-if="isExpandCollapse"
          class="table-openClose-btn"
          plain
          size="mini"
          @click="toggleExpandAll"
        >
          <svg-icon
            icon-class="table_open_icon"
            style="width: 16px; height: 16px"
          />
          展开/折叠
        </el-button>
      </el-col>
      <right-toolbar
        v-show="isRightToolbar"
        :showSearch.sync="showSearch"
        @queryTable="getTable"
      ></right-toolbar>
    </el-row>
    <el-table
      ref="queryTable"
      v-if="refreshTable"
      v-on="$listeners"
      v-loading="loading"
      :data="dataList"
      style="width: 100%; margin-bottom: 20px"
      :row-key="rowKey"
      :default-expand-all="defaultExpandAll"
      :border="border"
      :size="size"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        v-if="columns[0].type === 'checkout'"
        type="selection"
        width="55"
        align="center"
      />
      <table-column
        v-for="item in data"
        :item="item"
        :key="item.field"
        :operateArr="operateArray"
        :slotArr="slotArr"
        @on-operate="onOperate"
      >
        <template v-for="slot in slotArr" #[slot.default]="row">
          <slot :name="slot.default" v-bind="row"></slot>
        </template>
      </table-column>
    </el-table>
    <el-pagination
      v-if="pagination"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total,->, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import request from "@/utils/request";
import TableColumn from "./TableColumn.vue";
export default {
  name: "TablePanel",
  components: { TableColumn },
  props: {
    tableData: {
      type: [Array, String],
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    queryParams: {
      type: Object,
      default: () => {},
    },
    //行数据的 Key
    rowKey: {
      type: String,
      default: "",
    },
    //是否带有纵向边框
    border: {
      type: Boolean,
      default: false,
    },
    //Table 的尺寸
    size: {
      type: String,
      default: "small",
    },
    align: {
      type: String,
      default: "",
    },
    pageSizes: {
      type: Array,
      default: () => [10, 50, 100, 150],
    },
    // 操作列数组
    operateArray: {
      type: Array,
      default: () => [],
    },
    //是否显示分页
    pagination: {
      type: Boolean,
      default: true,
    },
    //是否是树形结构
    isTree: {
      type: Boolean,
      default: false,
    },
    // 是否展开树形结构
    isExpandAll: {
      type: Boolean,
      default: false,
    },
    // 是否显示右侧刷新按钮
    isRightToolbar: {
      type: Boolean,
      default: false,
    },
    // 是否显示搜索条件
    showSearch: {
      type: Boolean,
      default: true,
    },
    // 是否显示展开折叠按钮
    isExpandCollapse: {
      type: Boolean,
      default: false,
    },
    refresh: {
      type: Boolean,
      default: true,
    },
    // 请求方式
    requestWay: {
      type: String,
      default: "get",
    },
    // 判断是否是若依接口
    ruoYi: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      total: 0,
      dataList: [],
      data: [],
      pageSize: 10,
      currentPage: 1,
      defaultExpandAll: false,
      refreshTable: true,
      slotArr: [],
    };
  },
  created() {
    this.data = this.columns.filter((item) => item.type !== "checkout");
    this.defaultExpandAll = this.isExpandAll;
    if (typeof this.tableData === "string") {
      if (this.refresh) {
        this.getTable();
      }
    } else {
      this.dataList = this.tableData;
    }
    this.columns.forEach((item) => {
      this.columnRecursion(item);
    });
  },
  methods: {
    getTable() {
      this.loading = true;
      let params = null;
      if (this.isTree) {
        params = {
          ...this.queryParams,
        };
      } else {
        params = {
          ...this.queryParams,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
        };
      }
      if (this.requestWay === "get") {
        request({
          url: this.tableData,
          method: "get",
          params,
        }).then((response) => {
          if (response.data) {
            this.dataList = this.isTree
              ? response.data.rows
              : response.data.rows
              ? response.data.rows
              : response.data.roles;
            this.total = response.data.total;
          } else {
            this.dataList = this.isTree
              ? response.rows
              : response.rows
              ? response.rows
              : response.roles;
            this.total = response.total;
          }

          this.loading = false;
        });
      } else {
        request({
          url: this.tableData,
          method: "post",
          data: params,
        }).then((response) => {
          this.dataList = this.isTree ? response.data.rows : response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        });
      }
    },
    // 操作列点击事件
    onOperate(name, row) {
      this.$emit("onOperate", name, row);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTable();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTable();
    },
    // 树形结构展开折叠
    toggleExpandAll() {
      this.refreshTable = false;
      this.defaultExpandAll = !this.defaultExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    columnRecursion(item) {
      if (item.slots) {
        this.slotArr.push(item.slots);
      }
      if (item.children) {
        item.children.forEach((ite) => {
          this.columnRecursion(ite);
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #fafafa;
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border-color: #e9e9e9;
}
::v-deep .el-table td.el-table__cell {
  border-color: #e9e9e9;
}
::v-deep .el-table th.el-table__cell > .cell {
  font-size: 16px;
  color: #333333a6;
  font-weight: 500;
}
::v-deep .el-tooltip {
  span {
    font-size: 16px;
    font-weight: 400;
    color: #333333a6;
  }
  .ordinary-btn {
    width: 80px;
    height: 32px;
    border: 1px solid #dcdcdc;
    span {
      color: #333333e6;
    }
  }
}
::v-deep .el-pagination__total {
  font-size: 14px;
  color: #00000099;
}
::v-deep .el-pagination {
  .el-select .el-input {
    .el-input__inner {
      width: 90px;
      height: 32px;
      border-color: #dcdcdc;
      color: #000000e6;
      font-size: 14px;
      &:hover {
        border-color: #dcdcdc;
      }
    }
    .el-input__suffix {
      right: 12px;
      .el-select__caret {
        color: #000000e6;
        font-weight: 600;
      }
    }
  }
  .btn-prev,
  .btn-next {
    background-color: #fff;
  }
  .btn-next {
    color: #000000e6;
  }
  .el-pager {
    li {
      width: 32px;
      height: 32px;
      border-radius: 3px;
      background-color: #fff;
      border: 1px solid #dcdcdc;
      line-height: 32px;
      color: #00000099;
      &:not(.disabled):hover {
        color: #00000099;
      }
      &:not(.disabled).active {
        background-color: #971111;
        border-color: #971111;
        &:hover {
          color: #fff;
        }
      }
    }
  }
  .el-pagination__jump {
    color: #000000e6;
    font-size: 14px;
    .el-input__inner {
      width: 48px;
      height: 32px;
      font-size: 14px;
      color: #000000e6;
      border-color: #dcdcdc;
    }
  }
}
::v-deep .el-checkbox__inner {
  &:hover {
    border-color: #971111;
  }
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: #971111;
  background-color: #971111;
}
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #971111;
}
.table_index {
  display: inline-block;
  width: 130px;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  padding-left: 8px;
  cursor: no-drop;
  border: 1px solid #dcdcdc;
  background: rgba(241, 241, 241, 0.9);
}
</style>
